<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="search" :style="{'width':searchWidth}">
		<!-- 查询组件之前扩展内容 -->
		<slot name="left"></slot>
		<view class="search-body" @click="toTargetSearch()">
			<uni-icons type="search" class="px-1"></uni-icons>
			<view class="search-name">{{ searchName ? searchName : '输入名称' }}</view>
		</view>
		<!-- 查询组件之后扩展内容 -->
		<slot name="right"></slot>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="search" :style="{'width':searchWidth}">
		<!-- 查询组件之前扩展内容 -->
		<slot name="left"></slot>
		<view class="search-body" @click="toTargetSearch()">
			<uni-icons type="search" class="px-1"></uni-icons>
			<view class="search-name">{{ searchName ? searchName : '输入名称' }}</view>
		</view>
		<!-- 查询组件之后扩展内容 -->
		<slot name="right"></slot>
	</view>
	<!-- #endif -->
	
</template>
<script>
	import Constants from '@/constants';
	//查询组件
	//@group 业务组件
	export default {
		//
		name: 'search',
		mixins: [Constants],
		//
		props: {
			//搜索框宽度
			searchWidth: {
				type: String,
				default: '100%'
			},
			//搜索框名称
			searchName: {
				type: String,
				default: ''
			},
			//跳转页面
			targetPage: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		//
		methods: {
			//跳转到搜素页面
			toTargetSearch() {
				const searchPageUrl = this.pages.searchIndexPage;
				//判断来源页面
				let pages = this.$app.getCurrentPage();
				if (pages.length > 1 && pages[pages.length - 2].route === searchPageUrl) {
					uni.navigateBack();
					return;
				}
				//跳转到商品搜索页
				this.$app.navTo(searchPageUrl, {
					targetPage: this.targetPage
				});
				// this.$emit('search:toTargetSearch', this.targetPage);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		background: $uni-bg-color;

		.search-body {
			display: flex;
			align-items: center;
			width: 100%;
			height: 72rpx;
			background: $uni-bg-color-grey;
			border-radius: $uni-border-radius-base;
			font-size: $uni-font-size-base;
			color: $uni-text-color-primary;
			gap: 16rpx;

			.search-name {
				font-weight: 400;
				font-size: $uni-font-size-base;
				color: #A6A6A6;
			}
		}
	}
</style>